<template>
  <view class="content" :class="'theme-'+theme">
    <view class="row b-b">
      <text class="radio">发票类型</text>
      <radio-group style="font-size: 26rpx"  @change="invoiceTypeChange">
        <radio value="general" :color="themeColor" :checked="invoice.invoiceType==='general'" style="transform:scale(0.6)"/>增值税普通发票
        <radio value="special" :color="themeColor" :checked="invoice.invoiceType==='special'" style="transform:scale(0.6)"/>增值税专用发票
      </radio-group>
    </view>
    <view class="row b-b">
      <text class="tit">发票抬头</text>
      <input class="input" type="text" v-model="invoice.title" placeholder="请输入发票抬头" placeholder-class="placeholder" />
    </view>
    <view class="row b-b">
      <text class="tit">纳税人识别号</text>
      <input class="input" type="text" v-model="invoice.taxCode" placeholder="请输入15、18、20位纳税人识别码" placeholder-class="placeholder" />
    </view>
    <view class="row b-b">
      <text class="tit">注册地址</text>
      <input class="input" type="text" v-model="invoice.address" placeholder="请输入注册地址" placeholder-class="placeholder" />
    </view>
    <view class="row b-b">
      <text class="tit">注册电话/手机</text>
      <input class="input" type="text" v-model="invoice.phone" placeholder="请输入联系方式" placeholder-class="placeholder" />
    </view>
    <view class="row b-b">
      <text class="tit">开户银行</text>
      <input class="input" type="text" v-model="invoice.bank" placeholder="请输入银行名称" placeholder-class="placeholder" />
    </view>
    <view class="row b-b">
      <text class="tit">银行账号</text>
      <input class="input" type="text" v-model="invoice.bankAccount" placeholder="请输入银行账号" placeholder-class="placeholder" />
    </view>
    <view class="row default-row" v-if="type==='modify'">
      <text class="tit">设为默认</text>
      <switch :checked="invoice.isDefault" :color="themeColor" @change="switchChange" />
    </view>
    <button class="add-btn themeBgColor" @click="submit">提交</button>
  </view>
</template>

<script>
import { invoiceDetail,updateInvoice,addInvoice,defaultInvoice } from '@/api/invoice/invoice.js'
import { dictService } from '@/common/utils/api.js'
export default {
  data() {
    return {
      invoice:{},
      required:false,
      dataDictMap: {'BILL_REQUEST':[]},
      dataDictLists: [],
      invoiceType:'',
      type:''
    }
  },
  computed:{
    getInvoiceType(){
      return this.invoice.invoiceType
    }
  },
  watch:{
    getInvoiceType:{
      handler:function(newValue){
        if (newValue==='special'){
          this.required = true
        }else {
          this.required = false
        }
      }
    }
  },
  onLoad(option) {
    this.type = option.type
    dictService(this, ['BILL_REQUEST'])
    let title = '新增发票';
    if (option.type === 'modify') {
      title = '发票编辑'
      invoiceDetail({id:option.id}).then(res=>{
        if(res.code === 0){
          this.invoice = res.data
          if (this.invoice.isDefault == 1){
            this.invoice.isDefault = true
          }else {
            this.invoice.isDefault = false
          }
          delete this.invoice.invoiceMedium
          console.log('获得的this.invoice',this.invoice);
        }
      })
    }
    uni.setNavigationBarTitle({
      title
    })
  },
  methods: {
    // 发票类型修改
    invoiceTypeChange(e){
      this.invoice.invoiceType = e.detail.value
      // 类型为专用的所有项都为必填
      if (e.detail.value==='special'){
        this.required=true
      }
    },
    // 是否默认
    switchChange(e) {
      this.invoice.isDefault = e.detail.value;
    },
    toast(msg) {
      uni.showToast({
        title: msg,
        duration: 1200,
        mask: false,
        icon: 'none'
      });
    },
    back() {
      setTimeout(() => {
        // uni.navigateBack()
        this.backRouter()
      }, 800)
    },
    backRouter() {
      // #ifdef H5
      let canBack = true;
      const pages = getCurrentPages();
      // 有可返回的页面则直接返回，uni.navigateBack默认返回失败之后会自动刷新页面 ，无法继续返回
      if (pages.length > 1) {
        uni.navigateBack(1);
        return;
      }
      // vue router 可以返回uni.navigateBack失败的页面 但是会重新加载
      let a = this.$router.go(-1);
      // router.go失败之后则重定向到首页
      if (a == undefined) {
        uni.reLaunch({
          url: "/pages/index/index",
        });
      }
      return;
      // #endif
      uni.navigateBack(1);
    },
    //提交
    submit() {
      if (!this.invoice.title){
        this.$api.msg('请输入发票抬头');
        return;
      }
      if (!/^(([0-9a-zA-Z]{15})|([0-9a-zA-Z]{18})|([0-9a-zA-Z]{20}))$/.test(this.invoice.taxCode)){
        this.$api.msg('请输入15、18、20位纳税人识别码');
        return;
      }
      if (this.required&& !this.invoice.address) {
        this.$api.msg('请输入注册地址')
      }
      if (this.required && !/^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/.test(this.invoice.phone)) {
        this.$api.msg('请输入正确的手机号码');
        return;
      }
      if (this.required && !this.invoice.bank) {
        this.$api.msg('请输入银行名称');
        return;
      }
      if (this.required && !this.invoice.bankAccount) {
        this.$api.msg('请输入银行账号');
        return;
      }
      if (this.invoice.isDefault){
        this.invoice.isDefault = 1
      }else {
        this.invoice.isDefault = 0
      }
      if (this.type==='add'){
        addInvoice(this.invoice).then(res=>{
          if (res.code === 0){
            this.toast('提交成功！')
            this.back()
          }else {
            this.toast('提交失败！')
          }
        })
      }else {

        updateInvoice(this.invoice).then(res=>{
          if (res.code === 0){
            if (this.invoice.isDefault){
              defaultInvoice({id:this.invoice.id})
            }
            this.toast('提交成功！')
            this.back()
          }else {
            this.toast('提交失败！')
          }
        })
      }

    },
  }
}
</script>

<style lang="scss">
page {
  background: $page-color-base;
  padding-top: 16upx;
}

.popup {
  height: fit-content;
  width: 100%;
  background: #fff;
}

.item {
  line-height: 100rpx;
  text-align: center;
}

.row {
  display: flex;
  align-items: center;
  position: relative;
  padding: 0 30upx;
  height: 110upx;
  background: #fff;

  .radio{
    flex-shrink: 0;
    width: 160upx;
    font-size: 30upx;
    color: $font-color-dark;
  }
  .tit {
    flex-shrink: 0;
    width: 195upx;
    font-size: 30upx;
    color: $font-color-dark;
  }

  .delete {
    flex-shrink: 0;
    width: 120upx;
    font-size: 30upx;
    color: #fa436a;
  }

  .input {
    flex: 1;
    font-size: 30upx;
    color: $font-color-dark;
  }

  .icon-shouhuodizhi {
    font-size: 36upx;
    color: $font-color-light;
  }
}

.default-row {
  margin-top: 16upx;

  .tit {
    flex: 1;
  }

  switch {
    transform: translateX(16upx) scale(.9);
  }
}

.add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 690upx;
  height: 80upx;
  margin: 60upx auto;
  font-size: $font-lg;
  color: #fff;
  // background-color: $my-newh5-color;
  border-radius: 10upx;
  box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
}
</style>
